<%- include('common/header.html') %>
<style>
*{
    /* overflow:hidden ; */
    margin:0;
    padding:0;
}
.wangchao{
    overflow-x:hidden;
    /* margin-top:20px;  改变这里可以改变那个数据问题与头部的问题*/
    position:relative;
}
.header_img_nav img{
    width:100% !important;
    height:280px
}
.herder_img_nav{
    width:100%;
}
.header_title span{
    position: absolute;
    top:85px;
    display: block;
    width:64px;
    height:6px;
    background-color: #fff;
}
.header_title p{
    position:absolute;
    top:120px;
    font-size:34px;
    font-weight:800;
    color:#fff;
}
.header_title div{
    position: absolute;
    top:180px;
    color:#fff;
}
.header_title #main{
    width:270px;
    height:270px;
    position:absolute;
    top:-170px;
    left:950px;
}
.background_canvas{
    width:100%;
    background-color:#f7f7f7;
    overflow-x:hidden ;
}
.news_content {
    position: relative;
    padding-top:70px;
}
.news_content_one {
    word-wrap:break-word;
    display:block;
    text-indent:2em;
    font-size:16px;
    position:relative;
    padding-bottom:50px;
}
.news_date{
    position:absolute;
    top:110px;
    right: 140px;

}
.news_img{
    background-color:#fff;
    height:220px;
}
.col-lg-4{
    width:32% !important;
    margin:0 6px;
}
.news_img img{
    width:100%;
    height:200px;
}
.news_img h4{
    margin-left:50px;
}
.news_content h3{
    text-align: center;
    /* padding-bottom:40px; */
}
.col-lg-6{
    height: 380px;
    background-color: #fff;
    width:48% !important;
    margin:0 9px;
    position: relative;
    /* padding-bottom:40px; */
}
.row_big{
    padding-bottom:40px;
}
h3{
    text-align: center;
}
.col-lg-6 div{
    text-align: right;
    padding-right:40px;
}
.col-lg-6 img{
  width: 100%;
  height:280px;
}
.col-lg-6 p {
    font-size: 18px;
    font-weight: 700;
    position: absolute;
    top:90px;
    text-indent:2em;
    padding:2px 22px;
    color:#fff;
    /* color: #1db9ce; */
}
.news_row_img{
    padding-bottom:100px;
}
#tree,#flower{
   
    overflow-x: hidden;
    /* width: 200px; */
    /* height:200px; */
    position: absolute;
    right:150px;
    top: 80px;
}
#flower{
    width:600px !important;
    height: 800px !important;
    padding:0 !important;
}
#tree{
    padding:0 !important;
    width:600px !important;
    height: 410px !important;
}
</style>
    <link rel="stylesheet" href="/index/bootstrap/css/bootstrap.min.css">
<body>
    <div class="container-fluid wangchao">
        <div class="row header_img_nav">
            <img src="/index/images/news.jpg" alt="">
        <div class="container header_title">
            <span></span>
            <p>新闻世界</p>
            <div>打开一片天地，让我们眺望世界的角落</div>
            <div id="main" ></div>
        </div>        
        </div>
    </div>
    <div class="background_canvas">
    <canvas id="tree"></canvas>
    <canvas id="flower"></canvas>
    <div class="container">
        <div class="row row_big">
            <div class="news_content">
              <h3>woshi</h3>
              <div class="news_date">2022年</div>
              <div class="news_content_one"> 起飞页是响应式建站专家，拥有全球最领先的屏幕界面智能识别技术，实现所有建站功能组件在多种屏幕下的完美呈现，真正让您的桌面/平板/手机3个网站同步生成，还可连接微信公众平台，创建您的微站。当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。无论您是普通互联网用户，
                还是专业网站制作人员，都能使用起飞页设计出最具专业水准的网站。</div>
              <hr>
            </div>
            <div class="col-lg-4 news_img_one news_img"><img src="/index/images/productcenter-2.png" alt=""></div>
            <div class="col-lg-4 news_img_two news_img"><img src="./back.jpg" alt=""></div>
            <div class="col-lg-4 news_img_three news_img"><img src="./back.jpg" alt=""></div>
           
        </div>
        <div class="row news_row_img">
            <div class="col-lg-6"><h3>2</h3><div>2020/2/2 5:7:8</div><img src="/index/images/productcenter-2.png" alt=""><p>首先，放上我的网站的最初和现在的样子对比，是为了告诉每一个没有网页制作经验的伙伴网页制作并不是很复杂，只要花上一两个星期就可以学会制作一个看起来还不错的网站。同时也不用再去花费几千元找所谓的专业人士帮忙制作网站，大多时候网站制作的人都是用模板制作的，所以找这样的专业人士制作网站不如自力更生，不去交那种智商税。</p></div>
            <div class="col-lg-6"><h3>2</h3><div>2020/2/2 5:7:8</div><img src="./back.jpg" alt=""><p>21</p></div>
            <div class="col-lg-6 one-max"><h3>2</h3><div>2020/2/2 5:7:8</div><img src="./back.jpg" alt=""><p>4</p></div>
            <div class="col-lg-6 one-max"><h3>2</h3><div>2020/2/2 5:7:8</div><img src="./back.jpg" alt=""><p>首先，放上我的网站的最初和现在的样子对比，是为了告诉每一个没有网页制作经验的伙伴网页制作并不是很复杂，只要花上一两个星期就可以学会制作一个看起来还不错的网站。同时也不用再去花费几千元找所谓的专业人士帮忙制作网站，大多时候网站制作的人都是用模板制作的，所以找这样的专业人士制作网站不如自力更生，不去交那种智商税。</p></div>
        </div>
    </div>
    </div>
    <%- include('common/footer.html') %>   
</body>
</html>
<script>
    //两个canvas
    var tree = document.getElementById("tree");
    tree.width = window.innerWidth;
    tree.height = window.innerHeight ;
    var tCxt = tree.getContext("2d");
    var flower = document.getElementById("flower");
    flower.width = window.innerWidth;
    flower.height = window.innerHeight ;
    var cxt = flower.getContext("2d");
     
    var flowerList = [];//樱花列表
    var rootTop = 450 ;//树起点
    var flowerColor = "rgba(63,231,252,.3)" ;//花色
    var flowerColorDeep = "rgba(241,158,194,.5)" ;//花色深
    var treeColor2 = "rgba(255,192,203,.5)" ;//树枝颜色
    var treeColor = "#43eaff" ;//树干颜色
    var fallList = [];//飘落樱花列表
    var g = 0.01 ;//重力加速度
    var gWind = 0.005;//风力加速度
    var limitSpeedY = 1;//速度上限
    var limitSpeedX = 1 ;//速度上限
     
    cxt.shadowColor= "#FFF" ;
    cxt.shadowBlur = 10 ;
     
    function drawTree(x,y,deg,step,type){
        var deg1 = step%2 == 0 ? 0.1 : -0.1 ;
        var x1 = x + Math.cos(deg+deg1) * (step+4) * 0.8 ;//以步长来判断枝干长度 x轴偏移大一些
        var y1 = y + Math.sin(deg+deg1) * (step-1) * 0.8 ;//以步长来判断枝干长度 Y轴压缩一些
        tCxt.beginPath();
        tCxt.lineWidth = step/3;
        tCxt.moveTo(x,y);
        tCxt.lineTo(x1,y1);
        tCxt.strokeStyle = (step > 5 ) ? treeColor : treeColor2 ;//细纸条都换成花的颜色
        tCxt.stroke();
        if(step > 20){//树干相交的位置有间隙，以一个圆填充
            tCxt.fillStyle = treeColor ;
            tCxt.arc(x,y,step/6,0,Math.PI*2);
            tCxt.fill();
        }
        if(step < 3 || (step < 23 && Math.random() > 0.1)){
            //末梢位置 画花瓣
            var color = [flowerColorDeep,flowerColor,flowerColor][Math.round(Math.random()+0.2)] ;
            var r = 2+Math.random()*2
            tCxt.fillStyle = color ;
            tCxt.arc(x1+Math.random()*3,y1+Math.random()*3,r,0,Math.PI)
            tCxt.fill();
            flowerList.push({x:x,y:y,sx:(Math.random()-0.5),sy:0,color:color,r:r,deg:deg});//保存下画樱花的位置
        }
        step -- ;
        if(step > 0){
            drawTree(x1,y1,deg,step,type);
            if(step%3 == 1 && step > 0 && step < 30)
                drawTree(x1,y1,deg+0.2 + 0.3 * Math.random(),Math.round(step/1.13));//右分叉
            if(step%3 == 0 && step > 0 && step < 30)
                drawTree(x1,y1,deg-0.2 - 0.3 * Math.random(),Math.round(step/1.13));//左分叉
        }
    }
     
    drawTree(tree.width/2,rootTop,-Math.PI/2,30,1);//执行
     
    var len = flowerList.length ;
    function step(){
        if(Math.random() > 0.3)    fallList.push(flowerList[Math.floor(Math.random()*len)]);//随机取出一个，花瓣复制到飘落花瓣的列表中
     
        cxt.clearRect(0,0,tree.width,tree.height);
        for(var i = 0 ;i < fallList.length ; i ++){
            if(fallList[i].sy < limitSpeedY) fallList[i].sy += g ;
            fallList[i].sx += gWind ;
            fallList[i].x += fallList[i].sx ;
            fallList[i].y += fallList[i].sy ;
            if(fallList[i].y > rootTop+30){//飘到树根+30的花瓣移除
                fallList.splice(i,1);
                i -- ;
                continue ;
            }
            cxt.beginPath();
            cxt.fillStyle = fallList[i].color ;
            fallList[i].deg += fallList[i].sx*0.05 ;//跟速度相关的旋转花瓣
            cxt.arc(fallList[i].x,fallList[i].y,fallList[i].r,fallList[i].deg,fallList[i].deg+Math.PI*1.3);
            cxt.fill();
        }
        requestAnimationFrame(step);
    }
    requestAnimationFrame(step);
    </script>